<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title></title>
</head>
<body>
<div id="canvas-warp">
    <canvas id="canvas"></canvas>
</div>

<script>
    var canvas = document.getElementById("canvas");
    canvas.width = 500;
    canvas.height = 500;
    canvas.style.border = "1px solid #555";

    var ctx = canvas.getContext("2d");
    ctx.lineWidth = 10;
    ctx.lineJoin = "round";
    ctx.moveTo( 100 , 100 );
    ctx.lineTo( 200 , 200 );
    ctx.lineTo( 300 , 100 );
    ctx.stroke();

    ctx.beginPath();
    ctx.lineJoin = 'bevel';
    ctx.moveTo( 100, 150 );
    ctx.lineTo( 200, 250 );
    ctx.lineTo( 300, 150 );
    ctx.stroke();

    ctx.beginPath();
    ctx.lineJoin = 'miter';
    ctx.moveTo( 100, 200 );
    ctx.lineTo( 200, 300 );
    ctx.lineTo( 300, 200 );
    ctx.stroke();
</script>
</body>
</html>